<div class="slide-show" id="slide-show">
    <img image-id="<?=$first_item->id?>" current="0" src="<?=base_url() . $first_item->image_path ?>" alt="<?=$first_item->title_en?>">
</div>
    <div id="image-source">
    <?php $i = 0 ?>
    <?php foreach($images as $item): ?>
        <input id="item-<?php echo $i?>" type="hidden" value="<?=base_url() . $item->image_path ?>">
            <?php $i++ ?>
        <?php endforeach ?>
    </div>
<button id="full_button" style="display: none" onclick="change_image();" >Enter Fullscreen mode (Document)</button>
<script type="text/javascript">

    $(document).ready(function(){
        total = <?php echo count($images)?>;
        resize_();
        $(window).resize(function(){resize_()});

        setInterval(function() {
            change_image();
        }, 30000);

        start();

    });

    function start()
    {
        add = setInterval(function() {
            slide_image();
        }, 15000);
    }

    function stop()
    {
        clearInterval(add);
    }

    function slide_image()
    {
        var current = parseInt($('#slide-show img').attr('current')) + 1;
        if(current >= total) current = 0;
        var object = $('#item-' + current) ;
        $('#slide-show img').attr({
            'src':object.val(),
            'current':current
        });
    }

    function resize_()
    {
        $('#slide-show').css({
            width: $(window).width(),
            height: $(window).height(),
            overflow:'hidden'
        });

        $('#slide-show img').css({
            width:$(window).width()
        });
    }

    function change_image()
    {
        $.ajax({
            url:'get-image',
            type:'POST',
            data:{},
            dataType:'json',
            success:function(data)
            {
                if(data.count != total || data.style == '<?php echo $style?>')
                {
                    window.location.replace('<?php echo base_url() . 'home'?>');
                }

            }
        });

    }
</script>